<template>
  <div id="ht-minitepicker">
    <div v-popover:minPop_ref class="ht-timepicker-minite picker-box">
      <span>{{ selectedMinite }}</span>
    </div>
    <span style="margin-left: 5px">分</span>
    <vue-popper
      ref="minPop_ref"
      v-model="visible"
      popper-class="date-picker-popper"
      placement="bottom"
      trigger="click"
      :visible-arrow="false"
    >
      <div class="date-picker-box">
        <MiniteTable
          :selected-minite="selectedMinite"
          @onSelectMinite="handleSelectMinite"
        />
      </div>
    </vue-popper>
  </div>
</template>

<script>
import MiniteTable from './MiniteTable';

export default {
  name: 'HourPicker',
  props: {
    // 选中的小时
    selectedMinite: {
      type: String,
      required: true,
    },
    // 是否选中关闭弹框
    autoClose: {
      type: Boolean,
    },
  },
  components: { MiniteTable },
  data() {
    return {
      visible: false,
      calendarDate: '', // 显示的日期时间
    };
  },
  methods: {
    handleSelectMinite(val) {
      if (val !== this.selectedMinite) {
        this.$emit('onSelectMinite', val);
      }
      if (this.autoClose) {
        this.visible = false; // 关闭弹框
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#ht-minitepicker {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  .ht-timepicker-minite {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    width: 50px;
    text-align: center;
  }
  .picker-box {
    background-color: rgba(9, 78, 182, 0.7);
    border-left: 1px solid #255895;
    border-bottom: 1px solid #255895;
    cursor: pointer;
    user-select: none;
  }
}
</style>
